<script setup>
import {getInfo, userInfoUpdate} from "@/api/login.js";
import restPassword from '../../center/account/components/restPassword.vue'
import { showToast } from 'vant';

import { useI18n} from 'vue-i18n';
const { t } = useI18n();
const accountData = ref({})
const rules = ref([])
const email = ref('')
const password = ref('************')
const loadingBtn = ref(false)
const formRef = ref(null)
function getUser() {
  getInfo().then((res) => {
    accountData.value = res.data
  }).catch((err) => {
  })
}

// 修改名称
function changeName() {
  loadingBtn.value = true
  userInfoUpdate({
    firstName: accountData.value.firstName,
    lastName: accountData.value.lastName
  }).then(res => {
    loadingBtn.value = false
    showToast(t('userCenter.modifySuccessfully'))
  }).catch((err) => {
    loadingBtn.value = true
    showToast(t('userCenter.modificationFailure'))
  })
}

// 修改密码
const open = ref(false)
function openPasswordModal() {
  open.value = true
}
onMounted(() => {
  getUser()
})
</script>
<template>
  <div class="account">
    <h3>{{t('myAccount.title')}}</h3>
    <div class="account-form">
      <van-form
          ref="formRef"
          validate-trigger="['onSubmit']"
      >
        <c-input
            name="firstName"
            v-model:value="accountData.firstName"
            :placeholder="`${t('myAccount.firstNamePlaceholder')}*`"
            :rules="[{ required: true, message: $t('myAccount.lastNamePlaceholder') }]"
        />
        <c-input
            name="lastName"
            v-model:value="accountData.lastName"
            :placeholder="`${t('myAccount.lastNamePlaceholder')}*`"
            :rules="[{ required: true, message: $t('myAccount.firstNameTip') }]"
        />
      </van-form>
      <div class="mailbox">
        <label>{{t('myAccount.mailbox')}}</label>
        <div>
          <van-field v-model="accountData.email" :disabled="true" :border="false" class="e-input" />
        </div>
      </div>
      <div class="mailbox">
        <label>{{t('myAccount.passwordChange')}}</label>
        <div class="password-box">
          <van-field v-model="password" type="password" :disabled="true" :border="false" class="e-input" />
          <span @click="openPasswordModal">{{t('myAccount.alter')}}</span>
        </div>
      </div>
      <div class="btn-box">
        <van-button
            class="s-btn"
            @click="changeName"
            :loading="loadingBtn"
        >
          {{t('myAccount.save')}}
        </van-button>
      </div>
    </div>
    <rest-password :email="accountData.email" v-model="open"/>
  </div>
</template>
<style lang="scss" scoped>
.account {
  padding: 16px;
  h3 {
    font-size: 18px;
    font-weight: 500;
  }
  .mailbox {
    margin-bottom: 15px;
    label {
      font-size: 14px;
      color: #262626;
      font-weight: 500;
    }
    .e-input {
      margin-top: 10px;
      border: none;
      background: #FAFAFA;
    }
    .password-box {
      position: relative;
      span {
        position: absolute;
        right: 10px;
        top: 12px;
        font-weight: 400;
        text-decoration: underline;
        cursor: pointer;
        color: #262626;
        font-size: 14px;
      }
    }
  }
  .btn-box {
    position: fixed;
    bottom: 24px;
    left: 0;
    width: 100%;
    display: flex;
    padding: 0 16px;
    box-sizing: border-box;
    button {
      width: 100%;
    }
  }
  .s-btn {
    text-align: center;
  }
}
</style>
